<template>
  <div id="content">
    <div class="login Flex JC">
      <div class="bg">
        <h2 class="Flex JC">呀呀系统</h2>
        <h5 class="mt-60">tips:初始账号和密码分别为 yaya 123456</h5>
        <div class="mg-20">
          <el-form :model="form" :rules="rules" :hide-required-asterisk="true">
            <el-form-item prop="name" class="Flex JC">
              <el-input
                v-model="form.name"
                prefix-icon="el-icon-user"
                :placeholder="'请输入用户名'"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" class="Flex JC">
              <el-input
                v-model="form.password"
                @keyup.enter.native="login()"
                prefix-icon="el-icon-lock"
                :placeholder="'请输入用户密码'"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="Flex JC">
          <el-button type="primary" @click="login()">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
// import  {all}  from "../api/user"
export default {
  name: "Login",
  data() {
    return {
      token: {},
      userInfo: "",
      form: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    
  },
  methods: {
    login() {
      if(this.form.name == '') {
        this.$message.error('用户名不能为空');
      }else if(this.form.password == '') {
        this.$message.error('密码不能为空');
      }else{
        axios.get('http://127.0.0.1/login', {
          params: {
            name: this.form.name,
            password: this.form.password
          }
        }).then(res=>{
          if(res.data.status == 200) {
            console.log(this.form)
            this.$message({
              message: "登录成功！",
              type: "success",
            });
            sessionStorage.setItem("token", JSON.stringify(this.form));
            this.$router.push("/accountInfo");
            
          }else{
            this.$alert('用户名或密码错误', '登录失败', {
              confirmButtonText: '确定',
              callback: action => {
                this.form.name = '',
                this.form.password = ''
              }
            });
          }
        }).catch(err=>{
            console.log("登录失败" + err);
        })
      }
    },
    // loginClick() {
    //   //查找info表全部数据
    //   // axios
    //   //   .get("http://127.0.0.1/list/all",{name:this.form.name,password:this.form.password})
    //   //   .then((res) => {
    //   //     // console.log(res.data);
    //   //     console.log(res.data.code);
    //   //     if (res.data.name !==null  && res.data.password !==null) {
    //   //       this.$message({
    //   //         message: "登录成功！",
    //   //         type: "success",
    //   //       });
    //   //       this.$router.push("/accountInfo");
    //   //     }
    //   //   })
    //   //   .catch((err) => {
    //   //     this.$message.error("账号或密码错误，请重新输入！");
    //   //     return (this.form.name = ""), (this.form.password = "");
    //   //   });
    //   // this.userInfo = sessionStorage.getItem("userInfo")
    //   //     ? JSON.parse(sessionStorage.getItem("userInfo"))
    //   //     : null;
    //   // console.log(this.userInfo);
    //   // if (this.form.name == "yaya" && this.form.password == "123456"){
    //   //   this.$message({
    //   //     message: "登录成功！",
    //   //     type: "success",
    //   //   });
    //   //   this.$router.push("/accountInfo");
    //   // } else {
    //   //   this.$message.error("账号或密码错误，请重新输入！");
    //   //   return this.form.name = "", this.form.password = "";
    //   // }
    //   // console.log(111);
    // },
  },
};
</script>
<style lang="scss" scoped>
.cr .el-form-item__label {
  color: #ffffff;
}
#content {
  // background-color: #236279;
  background: url("../assets/images/bg.jpg") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  text-align: center;
}
.bg {
  margin-top: 10%;
  width: 300px;
  height: 300px;
  background-color: rgba(99, 94, 94, 0.5);
  border-radius: 5%;

  h2 {
    width: 300px;
    margin-bottom: 12px;
    position: absolute;
    color: #ffffff;
  }
  h5 {
    color: rgba(223, 76, 76, 0.63);
  }
}
</style>